<div class="row" style="background:url(<?= BASE_URI?>img/forum.jpg);background-size:cover;background-attachment:fixed;margin-top:2.4rem;">
  <div class="large-12 column" style="padding-top:2rem;padding-bottom:2rem;background:rgba(0,158,161,.7);">
    <div class="medium-10 medium-centered column"  style="padding:0;">
        <h4 style="color:white;margin-top:.3rem;"><strong style="color:white;margin-top:.9rem;">Behomebased.PH Forum</strong></h4>
    </div>
  </div>
</div>

<div class="row" style="">
	<div class="forum-view large-10 large-centered column">

		<section class="forumleft large-8 column" style="padding:1rem !important;">
			<div class="wrapit large-12 column">
				<header class="threadtitle large-12 column">
					<div class="large-12 column">
						<h5><?=$forum->title?></h5>
				        <p>By 
				            <a><?=$forum->username?></a>, <large> <abbr class="timeago" title="<?=$forum->date_created?>"></abbr></large>
				            <a class="right" href=""><?=$forum->category?></a>
				        </p>
				        <ul class="inline-list" style="margin-bottom:-.8rem;">
				          <li>
				            <label>
				            <?php 
				            $tags =json_decode($forum->tags);
				            if(sizeof($tags) > 0) { foreach ($tags as $tag) {
				            ?>
				              <a class="thread-tags tiny radius button"><?=$tag?></a>
			
				            <?php } }?>
				            </label>
				          </li>	
				          </ul>				
					</div>
				</header>				
				<article class="large-12 column">
					<p><?=$forum->content?></p>
				</article>
				<div class="screenshot large-12 column">
					<small>Screenshots</small>
					<ul class="tsk clearing-thumbs small-block-grid-4" data-clearing>
					  <?php 
					  $pictures = json_decode($forum->pictures);
					  $image1 = $pictures->image1;
					  $image2 = $pictures->image2;
					  $image3 = $pictures->image3;
					  
					  ?>
					  <?php if($image1){ ?>
					  <li><a class="th" href="<?=IMAGE_URL_SMALL.$image1?>">
					  	<img data-caption="caption here..." src="<?=IMAGE_URL_SMALL.$image1?>"></a>
					  </li>
					  <?php }?>
					  <?php if($image2){ ?>
					  <li><a class="th" href="<?=BASE_URI?>img/bg1.jpg">
					  	<img data-caption="caption here..." src="<?=IMAGE_URL_SMALL.$image2?>"></a>
					  </li>
					  <?php }?>
					  <?php if($image3){ ?>
					  <li><a class="th" href="<?=BASE_URI?>img/bg1.jpg">
					  	<img data-caption="caption here..." src="<?=IMAGE_URL_SMALL.$image3?>"></a>
					  </li>
					  <?php }?>
					</ul>
				</div>
			</div>
			<div class="large-12 column" style="background:#F5F5F5;border-radius:.45rem;padding:0;">
				<div class="commentforumform large-12 column">
					<div class="fontedit text-center large-12 column">
						<div class="large-1 column"><a><strong>B</strong></a></div>
						<div class="large-1 column"><a href=""><strong><i>I</i></strong></a></div>
						<div class="large-1 end column"><a href=""><strong>A</strong></a></div>
					</div>
					<textarea id="txtReply" placeholder="Write your comment here..."></textarea>
					<a id="btnReplyThread" class="radius tiny right button">Post</a>
				</div>
				<div class="large-12 column">

					<div id="replyContainer" >
					<!-- COMMENTS STARTS HERE -->
					<?php foreach ($replies as $reply) { ?>
			
					<div class="forumcomment large-12 column comments_member" data-equalizer>
						<div class="point large-2 column" data-equalizer-watch>
							<div class="pointwrap text-center large-12 column">
								<section class="top"><a><i class="fa fa-chevron-up"></i></a></section>
								<article><small>+4</small><p>Helpful</p><small>-2</small></article>
								<section class="bottom"><a><i class="fa fa-chevron-down"></i></a></section>	
							</div>								
						</div>
						<div class="commentinfo large-10 column" data-equalizer-watch>
							<header class="large-12 column">
								<div class="large-2 column">
									<img src="<?= IMAGE_URL_SMALL.$reply->profile_pic ?>">
								</div>
								<div class="user large-10 column">
									<a><strong><?=$reply->username?></strong></a><span> said on: <i>
									<?php 
									
								$date2 = new DateTime($reply->date_created,new DateTimeZone("Asia/Hong_Kong"));echo $date2->format('M d, Y h:i:s A')	;
									?>
								</i></span>
								</div>
								<article class="large-12 column">
									<p><?=$reply->content?></p>
								</article>
							</header>						
						</div>
					</div>
					<?php } ?>
					<!-- COMMENTS END HERE -->

					</div>
				</div>
			</div>

	
		</section>

		<aside class="forumaside large-4 column" data-equalizer style="margin-top:1rem;">
			<div class="large-4 column" data-equalizer-watch>
		        <div class="rep-wrap text-center large-12 column">
		          <div class="large-12 column" style="background:white;"><h3 id="total_reply">10</h3></div>
		            <div class="for-rep large-12 column">
		              <strong>Replies</strong>
		            </div>
		            <a class="radius tiny button">Follow</a>
		        </div>
			</div>
			<div class="authorinfo large-8 column" data-equalizer-watch>
				<div class="large-12 column" style="padding:0;"><strong>Author</strong></div>
				<div class="img large-3 column">
					<img src="<?=IMAGE_URL_SMALL.$forum->profile_pic ?>">
				</div>
				<div class="info large-9 column">
					<a><?=$forum->username?></a>
				</div>				
			</div>

		</aside>

		<aside class="relatedthreads large-4 column">
			<header class="large-12 column" style="padding:0;">
				<p>Related Threads</p>
			</header>
			<?php foreach ($related as $x) { ?>
			<?php if($x->id != $_GET['fhd']){ ?>
			<article class="suggestedthreads large-12 column">
				<a href="<?=BASE_URI?>be/forum_view?fhd=<?=$x->id?>"><strong><?=$x->title?></strong></a>
				<p>By 
				    <a ><?=$x->username?></a>, <small> <abbr class="timeago" title="<?=$x->date_created?>"></abbr></small>
				</p>
			</article>
			<?php } }?>
		</aside>

	</div>
</div>



<script>
jQuery(document).ready(function(){
    window.onscroll = function() {
        if (window.pageYOffset >= 300){
            jQuery('.forumaside').css({transition: 'background 0.92s ease,border 0.81 linear', position: 'fixed', width: '26rem', border: 'solid whitesmoke' , right: '40px', top: '70px'});
        }
        else {
            jQuery('.forumaside').css({position: '', width: '', right: '', top: ''});
        }
    }
});
</script>

<script type="text/javascript">
  $(document).ready(function(){
    $('.company-rating').jRating({
    });

    $('.user-rating').jRating({
      type:'small',
      length : 5,
      decimalLength : 1,
    });
  });
</script>

<style>
body {
	background: white !important;
}
</style>



<script type="text/javascript">
      $(function(){

  		function addReply(forum_id,content){
  			var params = {};
  			params.forum_id = forum_id;
  			params.content = content;

      		return $.ajax({
      			url: URL + 'threads/reply',
      			data: params,
      			type: 'post',
      			dataType: 'json'
      		});
      	}
      	function addComments(data){
      		var template = $('#forumReplyTpl2').html();
      		var html = Mustache.to_html(template,data);
      		$(html).prependTo('#replyContainer').hide().fadeIn('slow');
      		$('#btnReplyThread').html('Post');               
      		countReply();
      	}
      	function countReply(){
      		var total = $('.comments_member').length;
      		$('#total_reply').text(total);
      	}
          $(document).ready(function(){
          		countReply();

          		
          		$('#btnReplyThread').click(function(){
          			var content = $('#txtReply').val();
          			var forum_id = "<?=$_GET['fhd']?>";

          			if($(this).html() != 'Post'){return false;}
          			if(content.trim() != ''){
          				
          				$('#btnReplyThread').html('<span id="uploading"><img src="<?= BASE_URI ?>img/loading2.gif"/> Processing  </span>');
          				addReply(forum_id,content).done(function(result){
          					if(result.status == true){
          						addComments(result.data);	
          						$('#txtReply').val('');
          					}
          				});
          			}

          		});
              jQuery("abbr.timeago").timeago();

             var pusher = new Pusher(PUSHER_APP_KEY);
              var channel = pusher.subscribe('my-channel');
              
              channel.bind('added-forum_reply', function(data) {
				if(data.user_id != SS_USER_ID){
					
                	addComments(data)
                }
                jQuery("abbr.timeago").timeago();
              });

            
          });
      });
  </script>

  <script type="text/template" id="forumReplyTpl">  		
		<div class="forumcomment large-12 column comments_member" data-equalizer>
			<div class="point large-2 column" data-equalizer-watch>
				<div class="pointwrap text-center large-12 column">
					<section class="top"><a><i class="fa fa-chevron-up"></i></a></section>
					<article><small>+4</small><p>Helpful</p><small>-2</small></article>
					<section class="bottom"><a><i class="fa fa-chevron-down"></i></a></section>	
				</div>								
			</div>
			<div class="commentinfo large-10 column" data-equalizer-watch>
				<header class="large-12 column">
					<div class="large-2 column">
						<img src="{{profile_pic}}">
					</div>
					<div class="user large-10 column">
						<a><strong>{{username}}</strong></a><span> said on: <i>
						{{date_created}}
					</i></span>
					</div>
					<article class="large-12 column">
						<p>{{content}}</p>
					</article>
				</header>						
			</div>
		</div>
  </script>


  <script type="text/template" id="forumReplyTpl2">
  			<div class="forumcomment large-12 column comments_member" data-equalizer>
						<div class="point large-2 column" data-equalizer-watch>
							<div class="pointwrap text-center large-12 column">
								<section class="top"><a><i class="fa fa-chevron-up"></i></a></section>
								<article><small>+4</small><p>Helpful</p><small>-2</small></article>
								<section class="bottom"><a><i class="fa fa-chevron-down"></i></a></section>	
							</div>								
						</div>
						<div class="commentinfo large-10 column" data-equalizer-watch>
							<header class="large-12 column">
								<div class="large-2 column">
									<img src="{{profile_pic}}">
								</div>
								<div class="user large-10 column">
									<a><strong>{{username}}</strong></a><span> said on: <i>
									{{date_created}}
								</i></span>
								</div>
								<article class="large-12 column">
									<p>{{content}}</p>
								</article>
							</header>						
						</div>
					</div>
  </script>